<template>
  <view class="big_box">
    <view class="bgc" :style="bgcHeight"></view>
    <!-- 登录后显示 -->
    <view class="middle_box" v-if="token">
      <view class="collectNull" v-if="overviewList.length == 0">
        您的收藏空空如也噢!
      </view>
      <view class="ov_box" v-else>
        <view class="ov_list" v-for="(item, i) in overviewList" :key="i">
          <view class="ov_item" @click="gotoDetail(item)" v-if="item.state == 'show'">
            <view class="img">
              <image :src="item.pic" mode="widthFix"></image>
            </view>
            <view class="small_box">
              <view class="name">{{item.name}}</view>
              <view class="description">{{item.description}}</view>
              <view class="prevent" @click.stop>
                <view class="collection" @click="collection(item)">
                  取消收藏
                </view>
                <view class="content" @click="gotoContact(item)">
                  立即联系
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 未登录显示 -->
    <view class="no_login" v-else>
      登录后才可以看收藏噢,快来登录吧！！！
      <view class="tag">
            <uni-tag text="去登录" :circle="true" custom-style="padding: 12rpx 300rpx; font-size: 30rpx; background-color: #ffaef1; border: 1px solid #ffaef1;" @click="gotoLogin"></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
export default {
    data() {
      return {
        overviewList: [],
        why: [],
        token: '',
        bgcHeight: ""
      };
    },
    onShow() {
      this.getOverviewList()
    },
    onLoad() {
      uni.getSystemInfo({
        success: (res) => {
          this.bgcHeight = "height:" + res.windowHeight*2 + "rpx;"
        }
      })
    },
    onPullDownRefresh() {
      this.getOverviewList()
      setTimeout(function() {
        uni.stopPullDownRefresh();
        uni.showToast({
          title: "刷新成功",
          icon: "success",
          duration: 1000
        })
      }, 500);
    },
    methods: {
      getOverviewList() {
        this.token = uni.getStorageSync('jiayi_token')
        if(this.token) {
            const openid = uni.getStorageSync('jiayi_openid')
            uniCloud.callFunction({
              name: 'getUser',
              data: {openID: openid},
               success: async (res) => {
                 // 获取到了该用户全部 收藏的 _id
                const collection = res.result.data[0].collection
                // 转换查询
                for(var i=0; i<collection.length; i++) {
                  collection[i]= {_id: collection[i]}
                }
                // 避免报错 执行collection.length!==0
                if(collection.length !== 0) {
                  const db = uniCloud.database()
                  const dbCmd = db.command
                  const result = await db.collection("jiayi-message").where(dbCmd.and(dbCmd.or(collection), {state: "show"})).get()
                  const messageData = result.result.data
                  this.why = result.result.data
                  // 转换使用
                  for(var i=0; i<collection.length; i++) {
                    collection[i]= collection[i]._id
                  }
                  this.overviewList = []
                  messageData.map(x => {
                    this.overviewList[collection.indexOf(x._id)] = x
                  })
                  this.overviewList.reverse()
                } else {
                  this.overviewList = []
                }
              }
            })
        }
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpkg/detail/detail?_id='+ item._id
        })
      },
      // 取消收藏功能
      collection(item) {
        const openid = uni.getStorageSync('jiayi_openid')
          uniCloud.callFunction({
            name: 'getUser',
            data: {openID: openid},
            success: (res) => {
              this.overviewList.collection = res.result.data[0].collection
              if(this.overviewList.collection.indexOf(item._id) !== -1) {
                // 删除数组里相应的 _id
                this.overviewList.collection.splice(this.overviewList.collection.indexOf(item._id), 1)
                uniCloud.callFunction({
                  name: 'updateUser',
                  data: {a: {openID: openid}, b:{collection: this.overviewList.collection}},
                  success: () => {
                    uni.showToast({
                      title: "取消收藏成功",
                      icon: "success",
                      duration: 1500
                    })
                    this.getOverviewList()
                  }
                })
              }
            }
          })
      },
      gotoContact(item) {
        uni.navigateTo({
          url: '/subpkg/contact/contact?openid=' + item.user_openid
        })
      },
      gotoLogin() {
        uni.navigateTo({
          url: '/subpkg/login/login'
        })
      }
    }
  }
</script>

<style lang="scss">
.big_box {
    position: relative;
    .bgc {
      position: fixed;
      top: 0;
      z-index: 10;
      background: linear-gradient(to bottom, #fac3fc, #f4f4f6);
      width: 760rpx;
    }
    .middle_box {
      position: absolute;
      top: 0;
      z-index: 11;
      .collectNull {
        margin-top: 400rpx;
        width: 760rpx;
        color: #fff;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 34rpx;
        text-align: center;
      }
      .ov_box {
        .ov_list{
          width: 100%;
          height: 240rpx;
          margin-left: 16rpx;
          .ov_item {
            display: flex;
            margin-bottom: 1px;
            .img {
              text-align: center;
              margin-left: 16rpx;
              width: 220rpx;
              height: 220rpx;
              border-radius: 40rpx;
              overflow: hidden;
              image {
                width: 220rpx;
                max-height: 220rpx;
              }
            }
            .small_box {
              position: relative;
              margin-top: 20rpx;
              margin-left: 26rpx;
              width: 56%;
              .name {
                display: block;
                height: 40rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
              }
              .description {
                display: block;
                color: #aaaaaa;
                margin-top: 4rpx;
                height: 90rpx;
                line-height: 30rpx;
                font-size: 22rpx;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                line-clamp: 3;
                -webkit-box-orient: vertical;
              }
              .prevent {
                .collection {
                  position: absolute;
                  bottom: 15rpx;
                  right: 250rpx;
                  text-align: center;
                  background-color: #ffaef1;
                  border: 1px solid #ffaef1;
                  border-radius: 40rpx;
                  font-size: 24rpx;
                  color: #fff;
                  width: 150rpx;
                  height: 38rpx;
                  line-height: 38rpx;
                }
              
                .content {
                  position: absolute;
                  bottom: 15rpx;
                  right: 60rpx;
                  text-align: center;
                  background-color: #ffaef1;
                  border: 1px solid #ffaef1;
                  border-radius: 40rpx;
                  font-size: 24rpx;
                  color: #fff;
                  width: 150rpx;
                  height: 38rpx;
                  line-height: 38rpx;
                }
              }
            }
          }
        }
      }
      .bottom-login {
        position: fixed;
        display: flex;
        bottom: 0;
        width: 100%;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        padding-left: 20px;
        background-color: #fff;
        color: #ff8686;
        top: 0;
        z-index: 11;
      }
    }
    // 未登录显示
    .no_login {
      position: absolute;
      top: 0;
      left: 28rpx;
      z-index: 11;
      margin-top: 400rpx;
      text-align: center;
      color: #b8acac;
    }
    .tag{
      margin-top: 100rpx;
      text-align: center;
    }
  }
</style>
